<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <!--获取DOM的时机，得先加载完HTML标签-->
<!--  <script>-->
<!--    var d2 = document.getElementsByClassName('d2')[0];-->
<!--    console.log(d2)-->
<!--  </script>-->
</head>
<body>
<!--  <img  id="i" class="a" src="https://img0.baidu.com/it/u=2023170493,1198323537&fm=253&fmt=auto&app=138&f=JPEG?w=818&h=500">-->
<!--  <br>-->

 <div class="d1">
   <span class="s1">1</span>
   <span class="s1">2</span>
   <span class="s1">3</span>
 </div>
 <div class="d2">
   <span class="s1"></span>
   <span class="s1"></span>
   <span class="s1"></span>
 </div>

  <!--button 按钮   onclick 事件 鼠标单击触发事件  -->
  <button type="button" onclick="test()" >按钮</button>
  <script>
    function test() {
      //通过元素的ID属性获取DOM对象，获取的是一个元素对象
      // var i =document.getElementById('i')
      // i.src="https://img0.baidu.com/it/u=1610680713,975251961&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750"

      //通过class属性获取DOM对象，获取的是一组元素对象
      // var a = document.getElementsByClassName('a')


      // var d2 = document.getElementsByClassName('d2')[0];

      //className 是重新为class赋值
      // d2.className='d3'

      // var s1 = d2.getElementsByClassName('s1')
      // console.log(s1)

        //快捷方式
      //操作body标签
      // console.log(document.body)

      //获取所有的forms标签
      // console.log(document.forms)

      //获取所有的img标签
      // console.log(document.images)

      //新出，就是通过选择器得方式来获取DOM，只能获取一个
      // console.log(document.querySelector('.s1'))

      //新出，也是通过选择器来获取多个DOM对象
      console.log(document.querySelectorAll('.s1'))
    }
  </script>
</body>
</html>